var modal = $.BaseVue.extend({
    template: require("./i.html"),
    assets: [require("./i.less")],
    props: {
        showing: { default: false },
        middle: { default: false },
        fixed: { default: true },
        dialogForm: false,
        dialogClass: { default: '' },
        backDropClick: { default: true }
    },
    data: {
    },
    computed: {
        frameEl: function(){
            return this.fixed ? document.body : this.$el.parentNode;
        }
    },
    watch: {
        showing: function(){
            this.toggleFrameClass();
        }
    },
    created: function(){
        this.toggleFrameClass();
    },
    methods: {
        close: function(e){
            if(this.backDropClick){
                this.$emit('update:showing', false);
            }
        },
        toggleFrameClass: function(){
            this.frameEl.classList[this.showing ? 'add' : 'remove']("modal-opened");
        }
    }
});

module.exports = modal;
